<template>
  <!-- 添加考试-->
  <div class="app">
    <div class="txt">考试类型
      <el-radio-group v-model="labelPosition" size="mini" class="radio">
        <el-radio-button label="left">普通考试</el-radio-button>
        <el-radio-button label="right">认证考试</el-radio-button>
        <el-radio-button label="top">高校公开考试</el-radio-button>
        <el-radio-button label="mess">k12公开考试</el-radio-button>
      </el-radio-group>
    </div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="box">
      <el-form-item label="所属班级" prop="name">
          <el-select v-model="ruleForm.name" placeholder="请选择班级" size="mini" class="input" clearable>
            <el-option label="2020春_PY_金牌_337" value="shanghai"></el-option>
            <el-option label="2020春_PY_金牌_336" value="beijing"></el-option>
            <el-option label="2020春_PY_金牌_335" value="beijing"></el-option>
            <el-option label="2020春_PY_金牌_334" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属教学进度计划" prop="scheduleId">
            <el-select v-model="ruleForm.scheduleId" placeholder="请选择教学进度计划" size="mini" class="input top" clearable>
              <el-option label="2020春_PY_金牌_337" value="shanghai"></el-option>
              <el-option label="2020春_PY_金牌_336" value="beijing"></el-option>
              <el-option label="2020春_PY_金牌_335" value="beijing"></el-option>
              <el-option label="2020春_PY_金牌_334" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="课次" prop="timesId">
              <el-select v-model="ruleForm.timesId" placeholder="请选择课次" size="mini" class="input top" clearable>
                <el-option label="2020春_PY_金牌_337" value="shanghai"></el-option>
                <el-option label="2020春_PY_金牌_336" value="beijing"></el-option>
                <el-option label="2020春_PY_金牌_335" value="beijing"></el-option>
                <el-option label="2020春_PY_金牌_334" value="beijing"></el-option>
              </el-select>
            </el-form-item>
        <el-form-item label="考试名称" prop="examName">
        <el-input v-model="ruleForm.examName" class="input top" size="mini" clearable placeholder="请填入考试名称"></el-input>
      </el-form-item>
      <el-form-item label="考试时间" prop="time">
       <el-date-picker
            v-model="ruleForm.time"
            type="datetimerange"
            align="right"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['12:00:00', '08:00:00']"
            size="mini"
            class="input top">
          </el-date-picker>
      </el-form-item>
      <el-form-item label="提交试卷的时间" prop="provingType">
         <el-radio-group v-model="ruleForm.provingType" size="mini" class="radio top">
              <el-radio-button label="可以立即提交"></el-radio-button>
              <el-radio-button label="等待时间结束"></el-radio-button>
            </el-radio-group>
      </el-form-item>
      <el-form-item label="公布答案时间" prop="answerOccasionType">
         <el-radio-group v-model="ruleForm.answerOccasionType" size="mini" class="radio top">
              <el-radio-button label="试卷提交之后"></el-radio-button>
              <el-radio-button label="考试结束之后"></el-radio-button>
            </el-radio-group>
      </el-form-item>
      <el-form-item label="超时提交" prop="submitOccasion">
         <el-radio-group v-model="ruleForm.submitOccasion" size="mini" class="radio top">
              <el-radio-button label="不可以"></el-radio-button>
              <el-radio-button label="可以"></el-radio-button>
            </el-radio-group>
      </el-form-item>
      <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')" class="btn top">保存</el-button>
          <el-button @click="resetForm('ruleForm')" class="btn top">取消</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default{
  data () {
    return {
      labelPosition: 'right',
      ruleForm: {
        name: '',
        scheduleId: '',
        timesId: '',
        examName: '',
        time: '',
        provingType: '可以立即提交',
        answerOccasionType: '试卷提交之后',
        submitOccasion: '不可以'
      },
      rules: {
        name: [
          {required: true, message: '班级不能为空', trigger: 'blur'}
        ],
        scheduleId: [
          {required: true, message: '教学进度计划不能为空', trigger: 'blur'}
        ],
        timesId: [
          {required: true, message: '课次不能为空', trigger: 'blur'}
        ],
        examName: [
          {required: true, message: '考试名称不能为空', trigger: 'blur'}
        ],
        time: [
          {required: true, message: '考试时间不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  components: {

  },
  methods: {
    submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                alert('submit!');
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          }
  }
}
</script>

<style scoped="scoped" lang="scss">
  @import '../assets/style/common.scss';
  .app {
    width: 100%;
    height: 100%;
    .txt {
      margin-left: 70px;
      margin-top: 20px;
      .radio {
        margin-left: 60px;
      }
    }
    .box {
      margin-top: 30px;
      width: 90%;
      height: 80%;
      margin-left: 45px;
      .input {
        width: 90%;
        margin-left: 30px;
      }
      .radio {
       margin-left: 30px;
      }
      .btn {
        width: 55px;
        height: 30px;
      }
      .top {
        margin-top: 20px;
      }
     }
  }
</style>
